// pages/chat/chat.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    head:{
      
      server:'../source/轮椅.PNG'
    },//用户头像
    infoList:[],//待收集数据信息
    message: '',   // 待发送的数据信息
    id: 0,         // 数据信息标识
  },
  
  /**
   * 组件的方法列表
   */
  methods: {
    goback:function(){
      wx.switchTab({
        url: '../drink/drink',
      })
    },
    onLoad: function(options) {
      const userInfo = wx.getStorageSync('userInfo');
      this.setData({
        userInfo: userInfo,
       
      });
      console.log(userInfo);
      // 在这里可以使用 userInfo 数据
    },
    onShow: function() {
       const userInfo = wx.getStorageSync('userInfo');
     
      if (userInfo) {
        this.setData({
          hasUserInfo: true,
          userInfo: userInfo
        });
      } 
    },


    handleChange(opt){
      this.message = opt.detail.value
    },
    onLoad:function(){
      this.createSocketServer()
  
    },
    createSocketServer(){
      //服务器地址开头 ws/wss
      //创建服务器连接
      wx.connectSocket({
        url: 'ws://127.0.0.1:3000',
      })
      wx.onSocketOpen(() => {
        wx.showToast({
          title: 'Socket接入成功',
          icon:'success'
        })
        //接入问候语
        this.message = '欧内的手，好汉'
        this.handleSend()
        this.message = ''
      })
      wx.onSocketMessage((msg) => {
        var result = JSON.parse(msg.data);
        result.id = this.id++
        result.role = 'Sever' //服务端标出
        //收集
        var list = this.data.infoList
        list.push(result)
        //更新
        this.setData({
          infoList : list
        })
        //聊天视角定位
        this.rollingBottom()
      })

    },
    socketOn(){
      //监控介入
      wx.onSocketOpen((result) => {
        wx.showToast({
          title: 'socket接入成功',
          icon:'success'
        })
        //接入问候语
      })
    },
    //监控关闭
    socketClose(){
      wx.onSocketClose((result) => {
        //服务器关闭
        wx.showToast({
          title: 'socket已关闭',
          icon:'error'
        })
      })
    },
    //监控错误
    socketError(){
      wx.onSocketError((err) => {
        console.log('接入异常',err);
      })
    },

    //监控信息
    // socketShowMessage(){
    //   wx.onSocketMessage(() => {...})
    // },
    rollingBottom(){
      wx.createSelectorQuery().selectAll('.content-li').boundingClientRect(result=>{
        result.forEach(result=>{
          console.log(result)
          this.setData({
            scrollTop : result.bottom
          })
        })
      }).exec()
    },



    handleSend(){
      // 发送的内容不为空
      if(this.message){
          // 发送
          wx.sendSocketMessage({
              data : this.message
          })
          // 收集我发出的信息
          var list = this.data.infoList
          list.push({
            id: this.id++,
            content: this.message,
            role: 'self'  //标识 -客户端发出
          })
          //更新聊天框
          this.setData({
            infoList : list,
            message : '' //清空聊天框
          })
          //聊天视角------------------------------
          this.rollingBottom()
      }else{
          wx.showToast({
              title: '请输入聊天内容',
              icon: 'none',
              duration: 1000
          })
      }
    }


  }
})

